<template>
    <div class="comp-more-info">
        <label>课程名称</label>
        <p class="name ellipsis">{{ data.lessonName }}</p>
        <label>听评课访问码</label>
        <p class="code flex">{{ data.visitCode }}<span @click="copyCode(data.visitCode)">复制</span></p>
        <label>授课及指导老师</label>
        <section class="cards">
            <ul class="flex" :style="{'width': 230 * (data.reviewTeacherList ? data.reviewTeacherList.length : 0 + 1) + 'px'}">
                <li class="card">
                    <p class="teacher-name flex-center ">
                        <span class="ellipsis">{{ data.lectureTeacherName }}</span>
                        <span class="lecturer lecturer">授课人</span>
                    </p>
                    <p class="school ellipsis">{{ data.lectureTeacherOrganization }}</p>
                </li>
                <li class="card" v-for="item in data?.reviewTeacherList ?? []" :key="item.userId">
                    <p class="teacher-name flex-center ">
                        <span class="ellipsis">{{ item.userName }}</span>
                        <span class="lecturer guide-teacher">指导老师</span>
                    </p>
                    <p class="school ellipsis">{{ item.schoolName }}</p>
                </li>
            </ul>
        </section>
        <label>授课起止时间</label>
        <p>{{ dayjs(data.startTime).format('YYYY.MM.DD HH:mm') }}-{{ dayjs(data.endTime).format('YYYY.MM.DD HH:mm') }}</p>
        <label>分类</label>
        <p>{{ reviewTypes[data?.reviewType] }}</p>
        <label>课程标签</label>
        <p>{{ data.lessonTagList.join('；') }}</p>
        <label>学段学科年级</label>
        <p class="pr-15">{{ formatStageSubject(data.stageSubjectDTOList) }}</p>
        <p class="pr-15">{{ formatGrade(data.gradeDTOList) }}</p>
        <label>允许报名范围</label>
        <p>{{ applyTypes[data?.applyType] }}</p>
    </div>
</template>

<script setup>
import dayjs from 'dayjs'
import * as clipboard from 'clipboard-polyfill'
const props = defineProps({
    data: {
        type: Object,
        default: () => {}
    }
})

/**
 * @param reviewType 听评课课程类型
 * 1-课程分析 2-直播课程 3-现场评课
 */
const reviewTypes = {
    1: '课程分析',
    2: '直播课程',
    3: '现场评课',
}
/**
 * @param applyType 允许报名看课
 * 0-所有人 1-协作组 2-个人私有 3-本活动
 */
const applyTypes = {
    0: '所有人',
    1: '协作组',
    2: '个人私有',
    3: '本活动',
}
function formatStageSubject(arr) {
    let str = ''
    arr.forEach(item => {
        let itemStr = `${item.stageName}：`
        item.subjectList.forEach(val => {
            itemStr += `${val.subjectName}、`
        })
        str += itemStr.slice(0, itemStr.length - 1) + '；'
    })
    return str.slice(0, str.length - 1)
}
function formatGrade(arr) {
    return arr.map(item => item.gradeName).join('；')
}
function copyCode(text) {
    var oInput = document.createElement('input');
    oInput.value = text;
    document.body.appendChild(oInput);
    oInput.onfocus = function (e) {
        e.preventDefault();
    };
    oInput.select(); // 选择对象
    // oInput.setSelectionRange(0, oInput.value.length); //可以控制选择固定长度的文本
    document.execCommand('Copy');
    oInput.blur();
    document.body.removeChild(oInput);
    G_dispatchEvent('toast', { message: '复制成功！', type: 'success'});
}

</script>

<style lang='scss' scoped>
.comp-more-info {
    padding-left: 15px;
    padding-bottom: 27px;
    font-size: 15px;
    color: #171A1D;
    line-height: 24px;
    font-weight: 400;
    // height: 545px;
    height: 75vh;
    overflow-y: scroll;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    &::-webkit-scrollbar { width: 0 !important }
    padding-bottom: calc(constant(safe-area-inset-bottom) + 30px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 30px);
    .flex {
        display: flex;
    }
    .flex-center {
        display: flex;
        align-items: center;
    }
    .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pr-15 {
        padding-right: 15px;
    }
    label {
        display: inline-block;
        color: #A2A3A4;
        margin-bottom: 4px;
        margin-top: 20px;
    }
    .name {
        font-weight: 600;
        width: 345px;
    }
    .code {
        align-items: center;
        span {
            display: inline-block;
            font-size: 14px;
            color: #0084F6;
            padding: 0 6px;
            background: #E7F1FF;
            border-radius: 2px;
            text-align: center;
            margin-left: 10px;
        }
    }
    .cards {
        overflow-x: auto;
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
        &::-webkit-scrollbar { height: 0 !important }
        padding: 10px;
        margin-left: -10px;
    }
    ul {
        li {
            padding: 16px 15px;
            img {
                width: 52px;
                height: 52px;
                border-radius: 50%;
                margin-right: 14px;
            }
            .teacher-name .ellipsis {
                display: inline-block;
                max-width: 110px;
            }
            .teacher-name .lecturer {
                border-radius: 6px 6px 6px 0;
                font-size: 11px;
                color: #FF9201;
                line-height: 16px;
                margin-left: 6px;
                padding: 0 4px;
                border: 1px solid #FF9201;
            }
            .teacher-name .guide-teacher {
                color: #178EF5;
                border: 1px solid #178EF5;
            }
            
            .school {
                width: 180px;
                font-size: 13px;
                color: #A2A3A4;
                margin-top: 4px;
            }
        }
    }
    .card {
        width: 215px;
        height: 80px;
        background: #FFFFFF;
        box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
        border-radius: 4px;
        margin-right: 15px;
    }
}
</style>